import React, {PureComponent} from "react";

class ProjectHotComponent extends PureComponent {

    constructor(props){
        super(props);
        this.state={
           datas:[
               {id:0,link:"",title:"开源完整项目"},
               {id:1,link:"",title:"跨平台应用"},
               {id:2,link:"",title:"RecyclerView列表动效"},
               {id:3,link:"",title:"项目基础功能"},]
        };
    }

    render() {

        return (
            <div style={stWrapperStyle}>
                <div style={stTitleStyle}>热门项目</div>

                <ul style={stUlStyle}>
                    {
                        this.state.datas.map((item,index) =>{

                            return <li key={item.id} style={stLiStyle}>{item.title}</li>
                        })
                    }
                </ul>
            </div>
        );
    }


}



export default ProjectHotComponent;


const stWrapperStyle = {
    width: "100%",
    marginTop: 30,
    backgroundColor: "white",
    boxShadow: "2px 2px 2px #ccc"
};

const stTitleStyle = {
    width: "100%",
    height: 42,
    lineHeight: "42px",
    borderBottom: "solid 2px #8db5d0",
    paddingLeft: 10,
    color: "#333333",
    fontSize: 16,
    boxSizing: "border-box",
};

const stUlStyle = {
    width: "100%",
    marginLeft: 16,
    paddingBottom: 20,
    overflow: "hidden",
};

const stLiStyle = {
    display: "block",
    float: "left",
    marginTop: 20,
    marginRight: 14,
    fontSize: 16,
    color: "#3367d6",
    textDecoration: "underline",
    cursor: "pointer",
};